<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    ul, ol {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .lunbo {
      position: relative;
      margin: 100px auto;
      width: 880px;
      height: 550px;
      overflow: hidden;
      border: 1px solid #f00;
    }
    .banner {
      overflow: hidden;
    }
    .banner li {
      position: absolute;
      /* width: 100%; */
    }
    .banner li.current {
      z-index: 1;
    }
    .btn a {
      position: absolute;
      z-index: 1;
      width: 50px;
      height: 50px;
      top: 50%;
      margin-top: -25px;
      background-color: rgba(255, 255, 255, 0.3);
      text-align: center;
      font: 20px/50px "宋体";
      text-decoration: none;
      color: white;
    }
    .btn a:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }
    .btn a.left-arrow {
      left: 20px;
    }
    .btn a.right-arrow {
      right: 20px;
    }
    .sequence-number {
      position: absolute;
      z-index: 1;
      padding: 0 10px;
      bottom: 20px;
      left: 50%;
      width: 180px;
      margin-left: -90px;
      border-radius: 20px;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 0.3);
    }
    .sequence-number li {
      cursor: pointer;
      float: left;
      width: 20px;
      height: 20px;
      margin: 5px 5px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .sequence-number li:hover {
      background-color: rgba(255, 255, 255);
    }
    .sequence-number li.current {
      background-color: rgba(255, 255, 255);
    }
  </style>
</head>
<body>
  <div class="lunbo">
    <ul class="banner">
      <li class="current"><img src="./images/lunbo/c1.jpg"></li>
      <li><img src="./images/lunbo/c2.jpg"></li>
      <li><img src="./images/lunbo/c3.jpg"></li>
      <li><img src="./images/lunbo/c4.jpg"></li>
      <li><img src="./images/lunbo/c5.jpg"></li>
      <li><img src="./images/lunbo/c6.jpg"></li>
    </ul>
    <!-- 按钮 -->
    <div class="btn">
      <a class="left-arrow" href="javascript:void(0);">&lt;</a>
      <a class="right-arrow" href="javascript:void(0);">&gt;</a>
    </div>
    <!-- 小序号 -->
    <ol class="sequence-number">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <script src="./common.js"></script>
  <script>
    // 13. 给 part1-模块2-任务1 的轮播图静态页面添加JS事件，让其成功滚动

    // 获取元素
    var lunbo = my$('.lunbo')
    var banner = my$('.banner')
    var banners = banner.getElementsByTagName('li')
    var leftArrow = my$('.left-arrow')
    var rightArrow = my$('.right-arrow')
    var points = my$('.sequence-number').getElementsByTagName('li')

    var current = 0 // 设置信息变量并初始为0
    var len = banners.length // 获取总数
    var timer = null // 存储自动播放定时器的变量

    // 给左右箭头添加点击事件
    bindEvent(leftArrow, 'click', function () {
      current -= 1
      change()
    })
    bindEvent(rightArrow, 'click', pressRight)

    // 鼠标移入清除自动播放
    bindEvent(lunbo, 'mouseover', function () {
      clearInterval(timer)
    })

    // 鼠标移除自动播放
    bindEvent(lunbo, 'mouseout', autoPlay)
    
    // 绑定圆点切换事件
    for (var i = 0; i < len; i++) {
      (function () {
        var currentPointIndex = i
        bindEvent(points[i], 'click', function () {
          current = currentPointIndex
          change()
        })
      })()
    }

    // 设置根据信息变量做出变化的函数
    function change () {
      if (current > banners.length - 1) {
        current = 0
      } else if (current < 0) {
        current = banners.length - 1
      }
      // 排他
      for (var i = 0; i < len; i++) {
        banners[i].className = banners[i].className.replace('current', '')
        points[i].className = points[i].className.replace('current', '')
      }
      banners[current].className = banners[current].className += 'current'
      points[current].className = points[current].className += 'current'
    }
    
    // 按下右键函数
    function pressRight () {
      current += 1
      change()
    }

    // 自动切换
    function autoPlay () {
      if (timer) clearInterval(timer)
      timer = setInterval(function () {
        pressRight()
      }, 2000)
    }

    autoPlay() // 开始自动播放
  </script>
</body>
</html>